<template>
 <common-card title="累计用户数" :value="usersTotal | numberFormat">
     <template>
       <v-echarts :options="getOptions()" autoresize />
     </template>
     <!-- <template v-slot:total> -->
     <template #total>
       <div class="users-total">
       <span>同日比</span>
       <span class="emphasis">{{userGrowthLastDay + "%"}}</span>
       <div  :class="userGrowthLastDay > 0 ? 'increment' : 'decrement'"></div>
       <span style="margin-left:10px">月日比</span>
       <span class="emphasis">{{userGrowthLastMonth + "%"}}</span>
       <div :class="userGrowthLastMonth > 0 ? 'increment' : 'decrement'"></div>
       </div>
     </template>
   </common-card>
</template>

<script>
import {mapState} from "vuex"
export default {
name:"TotalUsers",

  /* 
  "usersTotal": 1177965,
  "usersLastDay": 1000000,
  "usersLastMonth": 800000,
  "userGrowthLastDay": "17.70",
  "userGrowthLastMonth": "47.12",
  */
  computed: {
    ...mapState({
      usersTotal: state => state.data.reportData.usersTotal,
      usersLastDay: state => state.data.reportData.usersLastDay,
      usersLastMonth: state => state.data.reportData.usersLastMonth,
      userGrowthLastDay: state => state.data.reportData.userGrowthLastDay,
      userGrowthLastMonth: state => state.data.reportData.userGrowthLastMonth,
    })
  },
  methods: {
    getOptions(){
      return {
        // x轴
        xAxis: {
          show: false,
          min: 0,
          max: this.usersTotal,
          type:'value'
        },
        // y轴
        yAxis: {
          type:"category",
          show: false,
          
        },
        // 系列
        series:{
          name:"用户月增长量",
          type: "bar",
          barWidth:"30%",
          data: [this.usersTotal - this.usersLastMonth], 
          showBackground:true,
          label:{
            show:true,
            formatter:"|",
            position:"right",
            distance:3
          }

        },
        // 网格
        grid: {
          top:0,
          left: 0,
          right: 0,
          bottom: 0
        },
        // 提示框
        tooltip: {

        },
        color: "#9ACD32"
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.users-total {
  display: flex;
}
</style>